<template>
  <div  style="height:100%;">
    <el-aside :style="{width: ELAside + 'px'}">
      <h1 class="logo" @click="toWhere('/')">视频网</h1>
      <el-menu 
        :default-active="defaultActive" 
        @open="handleOpen" 
        @close="handleClose"
        @select="handleSelect"
        :collapse="isCollapse"
        collapse-transition
        style="overflow: hidden;"
      >
        <el-menu-item index="1" @click="toWhere('/')">
          <i class="el-icon-video-camera"></i>
          <span slot="title">主页</span>
        </el-menu-item>
        <el-menu-item index="2" @click="toWhere('/any.html?tag=recommend')">
          <i class="el-icon-check"></i>
          <span slot="title">推荐视频</span>
        </el-menu-item>
        <el-menu-item index="3" @click="toWhere('/any.html?tag=hot')">
          <i class="el-icon-sunny"></i>
          <span slot="title">热门视频</span>
        </el-menu-item>
        <el-menu-item index="4" @click="toWhere('/any.html?tag=collect')">
          <i class="el-icon-star-off"></i>
          <span slot="title">收藏视频</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <div class="main-container">
      <div class="header">
        <el-input
          v-model="search"
          placeholder="请输入搜索内容"
          suffix-icon="el-icon-search"
          style="width: 300px;"
          class="header-search"
          @keyup.enter.native="toWhere('/search.html?search=' + search)"
        ></el-input>
        <div class="header-user">
          <el-badge value="5">
            <i class="el-icon-message-solid"></i>
          </el-badge>
          <el-avatar class="header-avatar"
            src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
          ></el-avatar>
        </div>
      </div>
      <el-main class="main" >
        <slot></slot>
      </el-main>
    </div>
  </div>
</template>

<script>
  module.exports = {
		name: "BaseLayout",
		props: {
		},
    data() {
      return {
        isCollapse: false,
        ELAside: 200,
        search: '',
        defaultActive: '1',
        tagsIndex: {
          collect: "4",
          hot: "3",
          recommend: "2"
        }
      }
    },
    created() {
      const params = new URLSearchParams(window.location.search);
      this.search = params.get('search') || '';
      const tag = params.get('tag') || '';
      if (tag) {
        this.$nextTick(() => {
          this.defaultActive = this.tagsIndex[tag];
          console.log(this.defaultActive);
        });
      }
    },
    mounted() {
      //监听窗口大小变化
      window.addEventListener('resize', this.resize)
      this.resize()
    },
    methods: {
      //当页面宽度小于1455px时，el-menu会自动收起
      resize() {
        if (window.innerWidth < 1455) {
          this.isCollapse = true
          this.ELAside = 65
        } else {
          this.isCollapse = false
          this.ELAside = 200
        }
      },
      handleOpen() {
        console.log('handleOpen')
      },
      handleClose() {
        console.log('handleClose')
      },
      handleSelect() {
        console.log('handleSelect')
      },
      toWhere(path) {
        window.location.href = path
      }
    }
	}
</script>

<style>
.logo{
  text-align: center;
  letter-spacing: 0.5em;
  cursor: pointer;
}

.el-aside{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1001;
  height: 100%;
  background-color: #ffffff;
}

.main-container{
  min-height: 100%;
  margin-left: 200px;
}

.header {
  position: fixed;
  left: 200px;
  top: 0;
  z-index: 1000;
  width: calc(100% - 200px);
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
}

.header-user {
  display: flex;
  align-items: center;
}

.header-user .header-avatar {
  margin-left: 20px;
}

.main {
  max-width: 100%;
  padding: 50px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

@media screen and (max-width: 1455px) {
  .logo{
    font-size: 14px;
    letter-spacing: 0.2em;
  }
  .main-container{
    margin-left: 65px;
  }
  .header {
    left: 65px;
    width: calc(100% - 65px);
  }
}
</style>

